<template>
  <div>
    <MyHeader></MyHeader>
    <SecHeader></SecHeader>
    <van-popup v-model="show">{{ info }}</van-popup>

    <h3 class="h3_title">抗原怎么测？😮</h3>
    <div class="video">
      <iframe width="90%" src="//player.bilibili.com/player.html?aid=348400789&bvid=BV1QR4y1k7ar&cid=914822917&page=1"
              border="0" framespacing="0" allowfullscreen="true">
      </iframe>
    </div>

    <div style="text-align: center;margin-top: 10px">
      <img src="static/antigen/抗原使用教程.png" style="width: 90%;">
    </div>
    <van-divider class="divider"
                 :style="{ color: '#1989fa', borderColor: 'rgba(25,137,250,0.34)', padding: '0 16px' }"/>


    <div style="text-align: center;margin-top: 10px">
      <img src="static/antigen/抗原使用教程2.png" style="width: 90%;">
    </div>
    <h3 class="h3_title">无法判断？上传图片看结果😉</h3>
    <div class="button">
      <van-uploader :before-read="beforeRead" :after-read="afterRead" :max-size="6 * 1024* 1024" @oversize="onOversize">
        <van-button icon="plus" type="primary">选择图片</van-button>
      </van-uploader>
    </div>




    <div class="image">
      <van-image
        width="80%"
        fit="contain"
        :src=this.img
      />
    </div>
    <div v-if="img" class="download_pic">
      <van-button plain type="primary" size="mini">保存图片</van-button>
    </div>

  </div>
</template>

<script>
import MyHeader from "../../components/common/MyHeader.vue";
import SecHeader from "../../components/SecHeader.vue";
import {Toast} from "vant";

export default {
  name: "AntigenRecognition",
  components: {SecHeader, MyHeader},

  data() {

    return {

      show: false,
      img: null,
      info: ''
    }
  },

  methods: {

    onOversize(file) {
      console.log(file);
      this.$toast('文件大小不能超过 6MB  ');
    },

    beforeRead(file) {
      if (!(file.type === 'image/jpeg' || file.type === 'image/png')) {
        this.$toast('请上传 jpg/png 格式图片');
        return false;
      }
      return true;
    },

    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file.file);
      // 在这里进行一系列的校验
      const formData = new FormData();
      formData.append("image", file.file);
      this.axios.post('/upload_pic', formData, {
        headers: {
          // 表示上传的是文件,而不是普通的表单数据
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        // 上传成功后的处理
        console.log(res.data.data.info)
        var info = res.data.data.info

        if (info.includes("no detections")) {
          console.log('没有结果')
        }

        console.log("字串位置" + (info.indexOf("negatives")));
        var formatted_negatives = info.substring((info.indexOf("negatives")) - 2, (info.indexOf("negatives")))

        console.log(formatted_negatives)


        var regexp1 = /[1-9]\d*\snegatives?/
        var regexp2 = /[1-9]\d*\spositives?/
        // console.log("结果：" + info.match(regexp1));
        // console.log("结果：" + info.match(regexp2));
        var result = ''
        if (info.match(regexp1)) {
          result += ('' + info.match(regexp1)).split(' ')[0] + '阴性 '
        }
        if (info.match(regexp2))
          result += ('' + info.match(regexp2)).split(' ')[0] + '阳性'

        // console.log(result)
        // var result = info.match(regexp1) + " " + info.match(regexp2)

        console.log("结果：" + result);
        this.info = "结果：" + result
        Toast(result);

        this.img = 'data:image/jpg;base64,' + res.data.data.img_base64.replace(/[\r\n]/g, '')

        // this.show = true

      }).catch(error => {
        console.log(error)
      })
    },

    Upload(event) {
      const file = event.target.files[0];
      // 在这里进行一系列的校验
      const formData = new FormData();
      formData.append("image", file);
      this.axios.post('/upload_pic', formData, {
        headers: {
          // 表示上传的是文件,而不是普通的表单数据
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        // 上传成功后的处理
        // console.log(res)


        this.img = 'data:image/jpg;base64,' + res.data.data.img_base64.replace(/[\r\n]/g, '')

      }).catch(error => {
        console.log(error)
      })
    },
  }
}
</script>

<style scoped>
.button {
  margin-bottom: 30px;
  text-align: center;
}

.video {
  /*margin-top: 10px;*/
  text-align: center;
  /*width: 100%*/
}

.h3_title {
  /*margin-left: 10px;*/
  text-align: center;
  font-weight: normal;
}


.divider {
  margin: 30px;
}

.image {
  text-align: center;
}

.download_pic {
  font-size: small;
  margin-top: 3px;
  margin-left: 15%;

}

</style>
